<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>表单</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <style>
        body {
            padding: 10px;
        }

        input {
            margin: 5px;
        }

        .basic {
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<div id="root">
    <h2>{{name}}</h2>
    <form @submit.prevent="registry">
        账号:<input type="text" v-model.trim="userInfo.account"><br>
        密码:<input type="password" v-model="userInfo.password"><br>
        年龄:<input type="number" v-model.number="userInfo.age"><br>
        性别:
        女<input type="radio" name="sex" value="female" v-model="userInfo.sex">
        男<input type="radio" name="sex" value="male" v-model="userInfo.sex">
        <br><br>
        爱好:
        琴<input type="checkbox" name="hobby" v-model="userInfo.hobby" value="琴">
        棋<input type="checkbox" name="hobby" v-model="userInfo.hobby" value="棋">
        书<input type="checkbox" name="hobby" v-model="userInfo.hobby" value="书">
        画<input type="checkbox" name="hobby" v-model="userInfo.hobby" value="画">
        <br><br>
        省:
        <select name="" id="" v-model="userInfo.province">
            <option value="">请选择</option>
            <option value="山东">山东</option>
            <option value="河北">河北</option>
            <option value="河南">河南</option>
            <option value="山西">山西</option>
        </select>
        <br><br>
        其他:
        <textarea rows="3" cols="10" v-model.lazy="userInfo.other"></textarea>
        <br><br>
        <input type="checkbox" name="" id="" v-model="userInfo.agree">阅读并同意<a href="http://www.baidu.com">用户协议</a>
        <br><br>
        <button>提交</button>
    </form>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;

    const vm = new Vue({
        el: '#root',
        data: {
            name: '培立优',
            userInfo: {
                account: 'peiliyou',
                password: '',
                sex: 'female',
                age: 18,
                hobby: ['画'],
                province: '山西',
                other: 'hero comes back',
                agree: true,
            }
        },
        //#region 
        computed: {
        },
        //#endregion
        //#region watch实现过滤
        // watch: {
        //     keyWord: {
        //         immediate: true,
        //         handler(nVal, oVal) {
        //             console.log(nVal);
        //             this.filterPersons = this.persons.filter((p) => {
        //                 return -1 !== p.name.indexOf(nVal);
        //             });
        //         },
        //     }
        // },
        //#endregion
        methods: {
            registry() {
                console.log(JSON.stringify(this.userInfo));
            }
        }
    });

</script>

</html>